<template>
  <div class="s_content">
    <div class="s_content_c inner_c">
      <div class="s_info">
        <div class="s_title">
          <a href="#">
            首页
          </a>
          &gt;
          <span>
						所有商品
					</span>
        </div>
        <div class="screen">
          <table>
            <tr class = "t1">
              <th>品牌</th>
              <td>
                <a href="#">无印</a>
                <a href="#">博朗</a>
                <a href="#">花印</a>
              </td>
            </tr>
            <tr class = "t2">
              <th>类别</th>
              <td>
                <a href="#">不锈钢</a>
                <a href="#">原料水泥</a>
                <a href="#">塑料</a>
                <a href="#">木质</a>
              </td>
            </tr>
          </table>
        </div>
        <div class="fun">
          <div class="sort">
            <span>排序：</span>
            <a href="#" class="s1">
              <i></i>销量
            </a>
            <a href="#" class="s2">
              <i></i>价格
            </a>
            <a href="#" class="s3">
              <i></i>上架时间
            </a>
          </div>
          <div class="swi">
            <span>仅显示有货：</span>
            <a href="#">
              <i></i>
            </a>
          </div>
          <div class="total">
            共<span>20</span>个商品
          </div>
        </div>
        <div class="s_prod">
          <ul class = "pub_pro">
            <li>
              <img src="../assets/img/img47.png" alt="">
              <div class="cont">
                <h3>不锈钢汤勺</h3>
                <span>￥300</span>
              </div>
              <div class="mask">
                <a href="#" class="btn">查看详情</a>
              </div>
            </li>
            <li>
              <img src="../assets/img/img41.png" alt="">
              <div class="cont">
                <h3>不锈钢汤勺</h3>
                <span>￥300</span>
              </div>
              <div class="mask">
                <a href="#" class="btn">查看详情</a>
              </div>
            </li>
            <li>
              <img src="../assets/img/img42.png" alt="">
              <div class="cont">
                <h3>不锈钢汤勺</h3>
                <span>￥300</span>
              </div>
              <div class="mask">
                <a href="#" class="btn">查看详情</a>
              </div>
            </li>
            <li>
              <img src="../assets/img/img43.png" alt="">
              <div class="cont">
                <h3>不锈钢汤勺</h3>
                <span>￥300</span>
              </div>
              <div class="mask">
                <a href="#" class="btn">查看详情</a>
              </div>
            </li>
            <li>
              <img src="../assets/img/img44.png" alt="">
              <div class="cont">
                <h3>不锈钢汤勺</h3>
                <span>￥300</span>
              </div>
              <div class="mask">
                <a href="#" class="btn">查看详情</a>
              </div>
            </li>
            <li>
              <img src="../assets/img/img46.png" alt="">
              <div class="cont">
                <h3>不锈钢汤勺</h3>
                <span>￥300</span>
              </div>
              <div class="mask">
                <a href="#" class="btn">查看详情</a>
              </div>
            </li>
            <li>
              <img src="../assets/img/img48.png" alt="">
              <div class="cont">
                <h3>不锈钢汤勺</h3>
                <span>￥300</span>
              </div>
              <div class="mask">
                <a href="#" class="btn">查看详情</a>
              </div>
            </li>
            <li>
              <img src="../assets/img/img49.png" alt="">
              <div class="cont">
                <h3>不锈钢汤勺</h3>
                <span>￥300</span>
              </div>
              <div class="mask">
                <a href="#" class="btn">查看详情</a>
              </div>
            </li>
            <li>
              <img src="../assets/img/img49.png" alt="">
              <div class="cont">
                <h3>不锈钢汤勺</h3>
                <span>￥300</span>
              </div>
              <div class="mask">
                <a href="#" class="btn">查看详情</a>
              </div>
            </li>
            <li>
              <img src="../assets/img/img47.png" alt="">
              <div class="cont">
                <h3>不锈钢汤勺</h3>
                <span>￥300</span>
              </div>
              <div class="mask">
                <a href="#" class="btn">查看详情</a>
              </div>
            </li>
            <li>
              <img src="../assets/img/img47.png" alt="">
              <div class="cont">
                <h3>不锈钢汤勺</h3>
                <span>￥300</span>
              </div>
              <div class="mask">
                <a href="#" class="btn">查看详情</a>
              </div>
            </li>
            <li>
              <img src="../assets/img/img47.png" alt="">
              <div class="cont">
                <h3>不锈钢汤勺</h3>
                <span>￥300</span>
              </div>
              <div class="mask">
                <a href="#" class="btn">查看详情</a>
              </div>
            </li>
          </ul>
        </div>
        <div class="pages">
          <a href="#">&lt;</a>
          <a href="#" class = "tol cur">1</a>
          <a href="#" class = "tol ">2</a>
          <a href="#">&gt;</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "allProducts"
  }
</script>

<style scoped>
  .s_content{
    width: 100%;
    background: #F2F2F2;
    padding-bottom: 60px;
  }
  .s_content .s_content_c{
    padding-top: 69px;
    background: #fff;
  }
  .s_content .s_content_c .s_info{
    padding: 10px;
  }
  .s_content .s_content_c .s_info .s_title{
    line-height: 40px;
    border-bottom: 1px solid #DDDDDD;
    font-size: 14px;
    color: #555555;
    padding-top: 20px;
  }
  .s_content .s_content_c .s_info .s_title a{
    color: #000;
  }
  .s_content .s_content_c .s_info .screen{
    padding: 30px 0;
    margin-bottom: 10px;
  }
  .s_content .s_content_c .s_info .screen table{
    width: 100%;
    line-height: 53px;
    font-size: 12px;
  }
  .s_content .s_content_c .s_info .screen table tr{
    border: 1px solid #ddd;
    overflow: hidden;
  }
  .s_content .s_content_c .s_info .screen table th{
    border-right: 1px solid #DDDDDD;
    width: 90px;
    text-align: center;
    font-weight: bold;
    color: #555555;
  }
  .s_content .s_content_c .s_info .screen table td{
    padding-left: 10px;

  }
  .s_content .s_content_c .s_info .screen table td a{
    margin-right: 30px;
  }
  .s_content .s_content_c .s_info .screen table td a:hover{
    text-decoration: underline;
  }
  .s_content .s_content_c .s_info .screen table .t2{
    background: #F3F4F4;
  }
  .s_content .s_content_c .s_info .fun{
    padding: 0 20px;
    font-size: 14px;
    color: #999999;
    height: 46px;
    line-height: 46px;
    overflow: hidden;
    margin-bottom: 10px;
  }
  .s_content .s_content_c .s_info .fun .sort{
    float: left;
  }
  .s_content .s_content_c .s_info .fun .sort a{
    padding: 8px 10px;
    margin: 5px;
    border: 1px solid #999;
    display: inline-block;
    line-height: 12px;
    border-radius: 2px;
  }
  .s_content .s_content_c .s_info .fun .sort a:hover{
    text-decoration: underline;
  }
  .s_content .s_content_c .s_info .fun .sort a i{
    display: inline-block;
    width: 15px;
    height: 15px;
    background: url(../assets/img/ico1.png);
    position: relative;
    top: 3px;
  }
  .s_content .s_content_c .s_info .fun .sort a.s2 i{
    background: url(../assets/img/ico2.png);
  }
  .s_content .s_content_c .s_info .fun .sort a.s3 i{
    background: url(../assets/img/ico3.png);
  }
  .s_content .s_content_c .s_info .fun .swi{
    float: left;
    margin-left: 20px;
  }
  .s_content .s_content_c .s_info .fun .swi a{
    display: inline-block;
    width: 38px;
    height: 16px;
    background: #909090;
    border: 2px solid #999;
    border-radius: 10px;
    vertical-align: middle;
  }
  .s_content .s_content_c .s_info .fun .swi a i{
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
  }
  .s_content .s_content_c .s_info .total{
    float: right;
    color: #000;
  }
  .s_content .s_content_c .s_info .total span{
    color: #999;
  }
  .s_content .s_content_c .s_info .s_prod{
    overflow: hidden;
  }
  .s_content .s_content_c .s_info .s_prod ul{
    overflow: hidden;
    width: 1164px;
  }
  .s_content .s_content_c .s_info .s_prod ul li{
    width: 246px;
    height: 362px;
    margin-right: 45px;
    margin-bottom: 30px;
    float: left;
    position: relative;
  }
  .s_content .s_content_c .s_info .s_prod ul li img{
    width: 100%;
  }
  .s_content .s_content_c .s_info .s_prod ul li:hover .mask{
    display: block;
  }
  .s_content .s_content_c .s_info .pages{
    text-align: right;
    color: #A3A3A3;
  }

  .s_content .s_content_c .s_info .pages .tol{
    display: inline-block;
    width: 30px;
    height: 30px;
    color: #999;
    text-align: center;
    line-height: 30px;
    border-radius: 3px;
    margin: 0 3px;
  }
  .s_content .s_content_c .s_info .pages .cur{
    background: #9DAFB8;
    color: #fff;
  }
  .s_content .s_content_c .s_info .pages .tol:hover{
    background: #9DAFB8;
    color: #fff;
  }
</style>
